<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />

        <q-toolbar-title></q-toolbar-title>

        <div>
          <q-btn
          flat
          dense
          round
          icon="open_in_new"
          @click="openInNew"
        />
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      :width="150"
    >
      <q-list>
        <q-item-label
          header
        >
          开发工具箱
        </q-item-label>

        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container  >
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import {ref} from 'vue'
import { useQuasar } from 'quasar'
import EssentialLink from 'components/EssentialLink.vue'

const $q = useQuasar()

const essentialLinks = [
  {
    title: 'Text',
    caption: '多行转一行',
    icon: 'text_fields',
    link: ''
  },
  {
    title: 'Excel',
    caption: 'Excl链接转图片',
    icon: 'image',
    link: 'index.html#/excel_utl_to_pic'
  },
  {
    title: 'Diff',
    caption: '数据对比',
    icon: 'difference',
    link: 'index.html#/data_diff'
  },
  // {
  //   title: 'Tools',
  //   caption: '工具箱',
  //   icon: 'square_foot',
  //   link: 'index.html#/tool'
  // },
]

const leftDrawerOpen  = ref(false)
const toggleLeftDrawer = ()=>{
  leftDrawerOpen.value = !leftDrawerOpen.value
}

const openInNew = ()=>{
  $q.bex.send('open_in_new')
}

</script>


<style>

</style>